<template>
  <div class="box">
    <el-card>
      <div class="title">
        <h2>{{ estllist.name }}</h2>
      </div>
      <el-form ref="form" :model="form" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="分类">
              <div v-html="form.classname"></div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="督办编号">
              <div v-html="form.code"></div>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="任务标题">
              <div v-html="form.keytask"></div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作举措">
              <div class="Richtext" v-html="form.tasknote"></div>
              <!-- <el-input
                type="textarea"
                v-model="form.SpecificTasks"
                :autosize="{ minRows: 5, maxRows: 5 }"
                disabled
              ></el-input> -->
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="完成标准">
              <div class="Richtext" v-html="form.standstr"></div>
              <!-- <el-input
                type="textarea"
                v-model="form.Standard"
                :autosize="{ minRows: 5, maxRows: 5 }"
                disabled
              ></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <div class="Richtext" v-html="form.note"></div>
              <!-- <el-input
                type="textarea"
                v-model="form.Remarks"
                :autosize="{ minRows: 5, maxRows: 5 }"
                disabled
              ></el-input> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="说明">
              <div class="Richtext" v-html="form.remark"></div>
              <!-- <el-input
                type="textarea"
                v-model="form.WorkMeasures"
                :autosize="{ minRows: 5, maxRows: 5 }"
                disabled
              ></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-col :span="24" class="btn-Add"> 成果与限制时间： </el-col>
      <el-table :data="tableData" style="width: 100%" height="300" border>
        <!-- <el-table-column prop="objective" label="预期标志性成果" min-width="500" :autosize="{ minRows: 5, maxRows: 5 }">
        </el-table-column> -->
        <el-table-column prop="objective" label="预期标志性成果" min-width="500">
          <template slot-scope="scope">
            <div v-html="scope.row.objective"></div>
          </template>
        </el-table-column>
        <el-table-column prop="enddate" label="完成时间" min-width="150"> </el-table-column>
        <el-table-column prop="workdpname" label="责任部门" min-width="150"> </el-table-column>
      </el-table>

      <el-col :span="24" class="btn-Add"> 任务拆分记录： </el-col>
      <el-table :data="tableDataSplit" style="width: 100%" height="300" border>
        <el-table-column prop="objective" label="任务描述" min-width="230"> </el-table-column>
        <el-table-column prop="enddate" label="完成时间" min-width="150"> </el-table-column>
        <el-table-column prop="workusername" label="责任人" min-width="150"> </el-table-column>
        <el-table-column prop="otherdpname" label="协办部门" min-width="230"> </el-table-column>
      </el-table>

      <el-col :span="24" class="btn-Add"> 最新进展： </el-col>
      <el-table :data="tableDatas" style="width: 100%" height="300" border>
        <el-table-column prop="mdate" label="创建时间" min-width="150"> </el-table-column>
        <el-table-column prop="objective" label="任务描述" min-width="230"> </el-table-column>
        <el-table-column prop="comper" label="完成比例" min-width="180">
          <template slot-scope="scope">
            <el-progress class="showProgressColor" :percentage="scope.row.comper"></el-progress>
          </template>
        </el-table-column>
        <el-table-column prop="note" label="最新进展" min-width="300">
          <template slot-scope="scope">
            <div v-html="scope.row.note"></div>

            <div v-for="item in scope.row.linklists">
              <el-link type="success" @click="onlinkTaskTitle(item.url)">{{ item.name }}</el-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="username" label="责任人" min-width="180"> </el-table-column>
        <el-table-column prop="dpname" label="责任部门" min-width="180"> </el-table-column>
        <el-table-column prop="enddate" label="要求完成时间" min-width="150"> </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { TaskQueryInfoByID, QueryDetailByTaskID, QueryTaskStandList, QueryNewProByTaskID } from '@/api/task/index'

export default {
  name: 'TasklistAddC',

  watch: {
    $route: {
      immediate: true,
      handler(newId) {
        if (newId.path == '/Fourth/Tasklist/TasklistAddC') {
          this.id = this.$route.query.id
          this.onSearch()
          this.estllist.name = newId.query.title
        }
      }
    }
    // '$route.query.id': {
    //   immediate: true,
    //   handler(newId) {
    //     this.id = newId
    //     console.log(newId)
    //     if (this.id != undefined) {
    //       this.onSearch()
    //     }
    //   }
    // }
  },

  data() {
    return {
      Visibles: this.$route.query.dis,
      form: {},
      tableData: [],
      tableDataSplit: [],
      estllist: {
        name: this.$route.query.title
      },
      tableDatas: [],
      loguserid: this.$store.getters.userInfo.id,
      logorgid: this.$store.getters.userInfo.orgid
    }
  },
  created() {
    this.Visibles = this.$route.query.dis
    // this.onSearch()
  },
  methods: {
    onSearch() {
      this.FdnIfan()
      this.AvtTime()
      this.Latest()
      this.Split()
    },
    // 获取基础信息
    async FdnIfan() {
      const res = await TaskQueryInfoByID({ id: this.$route.query.id })
      if (res.content == null) {
        this.form = {
          proid: this.$route.query.id
        }
      } else {
        if (res.content.tasknote != null) {
          res.content.tasknote = res.content.tasknote.replace(/\\n/g, '<br/>')
          res.content.tasknote = res.content.tasknote.replace(/\n/g, '<br/>')
        }

        if (res.content.standstr != null) {
          res.content.standstr = res.content.standstr.replace(/\\n/g, '<br/>')
          res.content.standstr = res.content.standstr.replace(/\n/g, '<br/>')
        }

        if (res.content.note != null) {
          res.content.note = res.content.note.replace(/\\n/g, '<br/>')
          res.content.note = res.content.note.replace(/\n/g, '<br/>')
        }

        if (res.content.remark != null) {
          res.content.remark = res.content.remark.replace(/\\n/g, '<br/>')
          res.content.remark = res.content.remark.replace(/\n/g, '<br/>')
        }

        this.form = res.content
        this.estllist.name = res.content.proname
      }
    },
    // 获取成果与时间
    async AvtTime() {
      const data = {
        loguserid: this.loguserid,
        logorgid: this.logorgid,
        taskid: this.$route.query.id,
        type: 1
      }
      // const result = await QueryDetailByTaskID(data)
      const result = await QueryTaskStandList(data)
      result.content.forEach(item => {
        if (item.objective != null) {
          item.objective = item.objective.replace(/\\n/g, '<br/>')
          item.objective = item.objective.replace(/\n/g, '<br/>')
        }
        if (item.note != null) {
          item.note = item.note.replace(/\\n/g, '<br/>')
          item.note = item.note.replace(/\n/g, '<br/>')
        }
      })
      this.tableData = result.content
    },
    // 获取最新进展
    async Latest() {
      const userdata = {
        loguserid: this.loguserid,
        logorgid: this.logorgid,
        taskid: this.$route.query.id
      }
      const { content } = await QueryNewProByTaskID(userdata)
      content.forEach(item => {
        var newlist = []
        if (item.filearr != null) {
          var linklist = item.filearr.split('\\n')
          linklist.forEach(row => {
            console.log(row)
            var newfilearr = row.split('|')
            newlist.push({ name: newfilearr[0], url: newfilearr[1] })
          })
        }
        item.linklists = newlist
      })
      console.log(content)
      this.tableDatas = content
    },
    // 任务拆分记录
    async Split() {
      const userdata = {
        loguserid: this.loguserid,
        logorgid: this.logorgid,
        taskid: this.$route.query.id,
        type: 2
      }
      const res = await QueryTaskStandList(userdata)
      console.log('任务拆分记录', res.content)
      // res.content.forEach(item => {
      //   if (item.objective != null) {
      //     item.objective = item.objective.replace(/\\n/g, '<br/>')
      //     item.objective = item.objective.replace(/\n/g, '<br/>')
      //   }
      // })

      this.tableDataSplit = res.content
    },
    onlinkTaskTitle(row) {
      window.open(row)
    }
  }
}
</script>

<style scoped>
.box >>> .el-select {
  width: 93%;
}
.title {
  display: flex;
  justify-content: center;
}
.btn-Add {
  padding: 20px 0;
}
.box {
  padding: 20px;
  background-color: #fdfbf2;
}
.el-card {
  background-color: transparent;
}
.box >>> .el-table,
.el-table__expanded-cell {
  background-color: transparent;
  /* border: 1px solid #000; */
}

.box >>> input {
  background-color: transparent;
}

.box >>> .el-table th {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.box >>> .el-table tr {
  background-color: transparent !important;
  /* border: 1px solid #000; */
}
.showProgressColor >>> .el-progress-bar__inner {
  background: linear-gradient(to right, blue, pink);
}
.box >>> .el-link {
  border-bottom: 1px solid #13ce66;
}

.Richtext {
  word-break: break-all;
  margin-right: 5px;
  line-height: 1.5;
  border: 1px solid #dcdfe6;
  height: 120px;
  overflow: auto;
  padding-left: 5px;
  line-height: 25px;
}
</style>
